<template>
  <el-row type="flex" justify="center">
    <el-col :span="24">
      <div class="content">
        <el-autocomplete
          class="input-with-select"
          size="medium "
          prefix-icon="el-icon-search"
          v-model="searchContent"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入内容"
          @select="handleSelect"
        >
          <template slot="append" class="nn">
            <el-button type="danger" @click="search">搜索</el-button>
          </template>
        </el-autocomplete>
        <el-button type="warning" class="ssbtn" size="medium" @click="search">全网搜索</el-button>
      </div>
    </el-col>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      searchContent: ""
    };
  },
  methods: {
    handleSelect() {},
    querySearchAsync() {},
    search() {  
        window.open("https://cn.bing.com/search?q="+this.searchContent,"_blank");
    }
  }
};
</script>

<style scoped>
@import url("//unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css");
.content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80px;
  background: url("~static/images/search-bg.jpg");
}
.el-input-group__append {
  background-color: #e1251b !important;
  color: white;
}
.ssbtn {
  background: #f39d01;
  color: white;
}
.ssbtn:hover {
  background: #f39d01 !important;
  color: white;
}
.el-button--warning {
  background: #f39d01 !important;
  color: white;
}
</style>